import React, {Component,useState } from 'react';
import ProCard from '@ant-design/pro-card';
import {PageContainer} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Select, ConfigProvider, Space } from 'antd';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import moment from 'moment';

//下边那个表格的
type GithubIssueItem = {
  key: number;
  name: string;
  createdAt: number;
};

const columnsOne: ProColumns<GithubIssueItem>[] = [
  {
    title: 'index',
    dataIndex: 'index',
    valueType: 'indexBorder',
  },
  {
    title: 'Title',
    dataIndex: 'name',
  },
  {
    title: 'Money',
    dataIndex: 'title',
    width: 100,
    valueType: 'money',
    renderText: () => (Math.random() * 100).toFixed(2),
  },
  {
    title: 'Created Time',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
  },
];

export type TableListItem = {
  key: number;
  name: string;
  creator: string;
  updatedAt: number;
  createdAt: number;
  money: number;
};
const tableListDataSource: TableListItem[] = [];

const creators = ['付小小', '曲丽丽', '林东东', '陈帅帅', '兼某某'];

for (let i = 0; i <   2; i += 1) {
  tableListDataSource.push({
    key: i,
    name: `TradeCode ${i}`,
    creator: creators[Math.floor(Math.random() * creators.length)],
    updatedAt: Date.now() - Math.floor(Math.random() * 1000),
    createdAt: Date.now() - Math.floor(Math.random() * 2000),
    money: Math.floor(Math.random() * 2000) * i,
  });
}
//下边那个表格结束

//上边那个表格的
const columnsTwo: ProColumns<TableListItem>[] = [
  {
    title: '标题',
    dataIndex: 'name',
    key: 'name',

  },
  {
    title: '备份名称',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
  },
  {
    title: 'part',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'String',

  },
  {
    title: '大小',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
  },
  {
    title: 'compress',
    key: 'since',
    dataIndex: 'createdAt',
    valueType: 'dateTime',
  },
  {
    title: '时间',
    key: 'since2',
    dataIndex: 'createdAt',
    valueType: 'date',
    hideInSetting: true,
  },

  {
    title: '操作',
    key: 'option',
    width: 120,
    valueType: 'option',
    render: () => [<a key="1">详情</a>],
  },
];
// 上边那个表格结束
const DataBackup = () =>{

  const [columnsStateMap, setColumnsStateMap] = useState<Record<string, ColumnsState>>({
    name: {
      show: false,
      order: 2,
    },
  });

  return (
    <PageContainer
      header={{
        title: '数据备份',
        breadcrumb: {},
      }}
    >
      <ProCard headerBordered headStyle={{fontSize:10}} style={{fontSize:10}} title="数据备份记录" layout="center" bordered>
        <ProTable<TableListItem, { keyWord?: string }>
          style={{width:'100%'}}
          columns={columnsTwo}
          pagination={false}
          options={false}
          rowKey="key"
          columnsStateMap={columnsStateMap}
          onColumnsStateChange={(map) => setColumnsStateMap(map)}
          search={false}
          dateFormatter="string"
          headerTitle=""
          dataSource={tableListDataSource}
        />
      </ProCard>


      <ProTable<GithubIssueItem>
        columns={columnsOne}
        request={async () => {
          return {
            data: [
              {
                key: 1,
                name: `TradeCode ${1}`,
                createdAt: 1602572994055,
              },
            ],
            success: true,
          };
        }}
        rowKey="key"
        rowSelection={{}}
        search={false}
        dateFormatter="string"
        headerTitle={(
          <div>
            数据库表列表
            <Button style={{marginLeft:16}} key="3" type="primary">
              备份
            </Button>
            <Button style={{marginLeft:10}} key="3" type="primary">
              优化表
            </Button>
            <Button style={{marginLeft:10}} key="3" type="primary">
              修复表
            </Button>
            <Button style={{marginLeft:10}} key="3" type="primary">
              导出文件
            </Button>
          </div>

        )}
        toolBarRender={() => [

        ]}
      />
    </PageContainer>
  );
}

export default DataBackup;
